<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .menu {
          list-style: none;
          margin: 0;
          padding: 0;
        }
        .menu>li {
          float: left;
          padding: 5px 20px;
          border: 1px solid #c9b8b8;
          background-color: skyblue;
          color: white;
          user-select: none;
        }
        a{
            text-decoration: none;
            color: white;
        }
        ul::after {
          content: "";
          display: block;
          height: 0;
          visibility: hidden;
          overflow: hidden;
          clear: both;
        }
        div {
          width: 1000px;
          min-height: 100px;
          background-color: antiquewhite;
        }
    </style>
</head>
<body>

    <ul class="menu">
        <li id="vegetables"><a href="#vegetables">蔬菜</a></li>
        <li id="fruit"><a href="#fruit">瓜果</a></li>
        <li id="oil"><a href="#oil">粮油</a></li>
        <li id="meat"><a href="#meat">禽肉</a></li>
      </ul>
      <div id="div1"></div>


    <script>

// -------------------------------------------------------------------
// hash 可以创建历史记录，并且在地址栏中增加#内容


    //   1-  location.href=location.href+"#abc";
    //   2- location.href=location.href+"?time="+Date.now();
    //   3-   location.href="./a.html";
// 1-在herf后面添加#后，不会刷新页面，产生有历史记录，可以在单页面解决问题
// 2-在herf后面添加？后  将会刷新页面
// 3-通过herf跳转其他页面时，会刷新页面




 
        // document.onclick=function(){
        //     location.href=location.href+"#a";
        // }

        // window.onhashchange=function(e){
        //     console.log(e);
        // }

        // window.onhashchange 监控历史记录
// 获取hash后在对象中寻找key，等价于a，再在对象中找value，value就是存储的数据，这样就完成了hash的跳转

// -----------------------------------------------------------------------------------




var list = {
        vegetables: [
          "大白菜",
          "娃娃菜",
          "油麦菜",
          "菠菜",
          "莲藕",
          "春笋",
          "韭菜",
          "胡萝卜",
          "大葱",
        ],
        fruit: [
          "苹果",
          "西瓜",
          "柚子",
          "梨",
          "香蕉",
          "樱桃",
          "草莓",
          "榴莲",
          "桃子",
          "杏",
          "橘子",
        ],
        oil: [
          "大米",
          "小米",
          "黄米",
          "黄豆",
          "绿豆",
          "红豆",
          "精面",
          "莜面",
          "花生油",
          "大豆油",
          "橄榄油",
        ],
        meat: [
          "牛肉",
          "羊肉",
          "鸡肉",
          "猪肉",
          "鸭肉",
          "鱼肉",
          "驴肉",
          "鸡蛋",
          "鸭蛋",
        ],
      };

      var prev,div1;
      init();
      function init(){
          div1=document.getElementById("div1");
          window.onhashchange=hashChangeHandler;
          changeTab(lis[0]);
          renderDiv(data,lis[0].id);
          
        }

      function hashChangeHandler(e){
          var id=location.hash.slice(1);
          changeTab(id);
          var data=list[id];
          renderDiv(data);
    
        }

      function renderDiv(data){
          div1.innerHTML="<ul>"+data.reduce(function(value,item){
                return value+"<li>"+item+"</li>";
          },"")+"</ul>";
      }


      function changeTab(id){
          if(prev){
              prev.style.backgroundColor="skyblue";
          }
          prev=document.getElementById(id);
          prev.style.backgroundColor="darkblue";
      }     
    

// 1- var id=location.hash.slice(1); 假设获取当前点击元素为#oil，需用slice提取元素
// 2-var data=list[id]; 获取数据，list里的id
// 3-renderDiv(data); 将数据放入函数中，进行渲染




// history不会产生hash那种标记，可以做出标记
// history的历史记录利用的是push的方式，这种方式可以替换修改
// hash产生的历史记录不能修改







</script>
</body>
</html>